<template>
  <div>
      <div v-for="item in resizeList" :key="item.id">
        {{item.name}}/{{item.nick}}
      </div>
      <div v-permission="0">
        权限1不显示
      </div>
      <div v-permission="1">
        权限2显示
      </div>
      <div v-permission="3">
        权限3显示
      </div>
      <div class="inject">
        <Inject />
      </div>
      <div class="form">
        <a-form
            :model="formState"
            name="horizontal_login"
            layout="inline"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
          >
           <a-form-item
              label="Username"
              name="username"
              :rules="[{ required: true, message: '请输入内容' }]"
            >
              <a-input v-model:value="formState.username">
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button :disabled="disabled" type="primary" html-type="submit">Log in</a-button>
              <!-- <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button> -->
            </a-form-item>
        </a-form>
      </div>
      <div class="tab-warp">
        <a-tabs class="tab" v-model:activeKey="activeKey" type="card" @tabClick="handleTabClick"> 
          <a-tab-pane key="1" tab="Tab 1">
            <Tab1 :status="tabStatus.tab1" @changeStatus="changeStatus" />
          </a-tab-pane>
          <a-tab-pane key="2" tab="Tab 2">
            <Tab2 :status="tabStatus.tab2" @changeStatus="changeStatus"/>
          </a-tab-pane>
          <a-tab-pane key="3" tab="Tab 3">
            <Tab3 :status="tabStatus.tab3" @changeStatus="changeStatus"/>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- dropdown -->
      <a-dropdown trigger="click">
        <a-button >
          Button
          <DownOutlined />
        </a-button>
        <template #overlay>
          <a-menu v-isLeaf>
            <a-menu-item>
              <a href="javascript:;">1st menu item</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">2nd menu item</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">3rd menu item</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { DownOutlined } from '@ant-design/icons-vue';
import {ref, onMounted, reactive, provide, computed, } from 'vue'
import Inject from './isComponent/Inject.vue'
import {UserOutlined} from '@ant-design/icons-vue'
import Tab1 from './tabs/Tab1.vue'
import Tab2 from './tabs/Tab2.vue'
import Tab3 from './tabs/Tab3.vue'


interface resizeItem {
  name: string
  nick: string
  id: string
}

const resizeList = ref<resizeItem[]>([])


onMounted(async () => {
  const {data} = await axios.get('/public/1.json')
  resizeList.value = data.first
})

// 祖先元素设置值
provide('key', '传递的值')

// form
interface FormState {
  username: String
}
const formState = reactive<FormState>({
  username: ''
})

const onFinish = (value: any) => {
  console.log('success')
}
const onFinishFailed = (errorInfo: any) => {
  console.log('success')
}
const disabled = computed(() => {
  return !formState.username
})

// tabs切换
const activeKey = ref('1')

const tabStatus = reactive({
  tab1: false,
  tab2: false,
  tab3: false,
})
const handleTabClick = (tab: any) => {
  if (tab === activeKey.value) {
    // 切换的时候请求当前页数据
    return
  }
  console.log(tab, tabStatus)

  switch(tab){
    case '1' : tabStatus.tab1 = true; break;
    case '2' : tabStatus.tab2 = true; break;
    case '3' : tabStatus.tab3 = true; break;
  }
  
}
const changeStatus = (val: any) => {
  console.log('change', val)
  tabStatus[val] = false
}


// let obj1={
//     a:'asd',
//     b:'aassd',
//     c:'assdfd',
//     d:'asfdgd'
    
// }
// let obj2={
//     a:'',
//     c:''
// }
// Object.keys(obj2).map(function(key: string){
//   obj1[key] && (obj2[key] = obj1[key]);
// })

let breed = 'pitbull2'

const switch1 = (breed: string) => {
  switch(breed){
    case 'border':  return '11111'; break;
    case 'pitbull':  return '22222'; break;
    case 'german':  return '33333'; break;
    default: return 'default' 
  }
}

const switch2 = (breed: string) => ({
  'border': '111111111111',
  'pitbull': '22222222222',
  'german': '3333333333333',
})[breed] || 'default'

console.log(switch2(breed))

console.log(switch1(breed))


const fn = () => 'asdf'

console.log(fn())



</script>
<style scoped lang="scss">
.inject {
  margin-top: 20px;
}
.form {
  margin-top: 30px;
}
.tab-wrap {
  margin-top: 30px;
}
</style>